<template>
	<view class="BusinessSchool">
		<Banner :detail="banner" v-if="banner.length > 0"></Banner>
		<view class="tui-header__bg">
			<view class="center-cut-menu">
				<scroll-view scroll-x="true" scroll-with-animation="true" class="scroll-view" :scroll-left="scrollLeft">
					<view class="scroll-item" v-for="(item, index) in navlist" :key="index" @tap="setNav(item.id,index)">
						<text class="item-text" :class="curIndex == index? 'active' : ''">{{item.businessName}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="bs__content">
			<view class="bs__item" v-for="(item, index) in yxBusinessTitleList" :key="index"
				v-if='item.businessTypeId == businessId && footerType == 0' @click="BusinessDetail(item.id)">
				<view class="left">
					<view class="title">
						{{ item.titleName.length > 9 ? item.titleName.substring(0, 9) + "..." : item.titleName }}
					</view>
					<view class="box">
						{{ item.titleInfo.length >= 25 ? item.titleInfo.substring(0, 25) + "..." : item.titleInfo }}
					</view>
					<view class="sot">
						{{ item.browse }} 人观看
					</view>
				</view>
				<view class="right">
					<image :src="item.image" mode=""></image>
				</view>
			</view>
			<view class="bs__item" v-for="(item, index) in yxBusinessTitleList" :key="index"
				v-if='item.businessTypeId == businessId && footerType == 1 && userInfo.level >= item.singular'
				@click="BusinessDetail(item.id)">
				<view class="left">
					<view class="title">
						{{ item.titleName.length > 9 ? item.titleName.substring(0, 9) + "..." : item.titleName }}
					</view>
					<view class="box">
						{{ item.titleInfo.length >= 25 ? item.titleInfo.substring(0, 25) + "..." : item.titleInfo }}
					</view>
					<view class="sot">
						{{ item.browse }} 人观看
					</view>
				</view>
				<view class="right">
					<image :src="item.image" mode=""></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn_item" :class="footerType == 0 ? 'active' : '' " @tap="setFooterBtn(0)">
				<text class="iconfont icon-pailie"></text>全部
			</view>
			<view class="btn_item_my" :class="footerType == 0 ? '' : 'active' " @tap="setFooterBtn(1)">
				<text class="iconfont icon-gouwuche1"></text>我的
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex";
	import Banner from "./components/Banner";
	import {
		getSpreadInfo,
		getUserInfo
	} from "@/api/user";
	import {
		getBusinessData,
		getBusinessDetailData
	} from "@/api/public";
	import cookie from "@/utils/store/cookie";
	export default {
		name: "BusinessSchool",
		components: {
			Banner
		},
		props: {},
		data: function() {
			return {
				banner: [],
				navlist: [],
				yxBusinessTitleList: [],
				active: 0,
				footerType: 0,
				businessId: '',
				contentScrollW: 0, // 导航区宽度
				curIndex: 0, // 当前选中
				scrollLeft: 0, // 横向滚动条位置
			};
		},
		onReachBottom() {
			// console.log('已经到底了')
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		mounted: function() {
			this.lodINdexData()
		},
		onShow() {
			if (this._route.query.spread) {
				let urlSpread = this._route.query.spread
				cookie.set("spread", urlSpread)
			}
			
			if (!this.$store.getters.token) {
				this.$yrouter.reLaunch({
					path: "/pages/authorization/index"
				});
			}else this.$store.dispatch('getUser', true)
			
		},
		methods: {
			home() {
				this.$yrouter.switchTab({
					path: "/pages/home/index"
				});
			},
			onShareAppMessage: function() {
				return {
					title: this.miniHomeRemark,
					imageUrl: this.miniHomeImg,
					path: "pages/BusinessSchool/index?spread=" + uni.getStorageSync("uid"),
				};
			},
			lodINdexData() {
				let that = this;
				getBusinessData().then((res) => {
					console.log(res.data)
					that.$set(that, "banner", res.data.businessSchoolBanner);
					that.$set(that, "navlist", res.data.yxBusinessTypeList)
					that.$set(that, "yxBusinessTitleList", res.data.yxBusinessTitleList)
					that.businessId = this.navlist[0].id

				});
			},

			BusinessDetail(id) {
				this.$yrouter.push({
					path: '/pages/BusinessDetail/index',
					query: {
						id: id
					}
				});
			},
			setNav(id, index) {
				let _index = index;
				let bsId = id;
				let that = this;
				that.active = _index;
				that.businessId = bsId
				that.curIndex = _index
			},

			setFooterBtn(type) {
				let _type = type
				let that = this;
				that.footerType = _type
			}
		}
	};
</script>


<style lang="less">
	page {
		background: #FFFFFF;
	}

	.BusinessSchool {
		padding-bottom: 100rpx;

		.bs__content {
			width: 100%;
			padding: 0 30rpx;
			
			.record-bg{
				width: 400rpx;
				height: 400rpx;
				margin: 0 auto;
				
				image{
					width: 100%;
					height: 100%;
				}
			}

			.bs__item {
				height: 250rpx;
				width: 100%;
				border-bottom: #e8e8e8 solid 1rpx;

				.left {
					width: 390rpx;
					height: 100%;
					float: left;
					padding-top: 30rpx;
					padding-right: 20rpx;
					position: relative;

					.title {
						font-size: 34rpx;
						font-weight: 600;
						color: #222;
					}

					.box {
						color: #999;
						margin-top: 10rpx;
						font-size: 28rpx;
					}

					.sot {
						position: absolute;
						bottom: 30rpx;
						color: #999;
						font-size: 28rpx;
					}
				}

				.right {
					width: 300rpx;
					height: 100%;
					float: left;
					padding-top: 30rpx;

					image {
						width: 300rpx;
						height: 200rpx;
					}
				}
			}
		}


		.tui-header__bg {
			width: 100%;
			height: 120rpx;
			z-index: 3;
			overflow: hidden;
			padding: 0 30rpx;
			
			
			
			.center-cut-menu {
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
				// background-color: rgba(7, 61, 141, 1);
			
				.scroll-view {
					height: 100rpx;
					white-space: nowrap;
			
					.scroll-item {
						height: 100rpx;
						padding: 0 20rpx;
						display: inline-block;
						text-align: center;
			
						.item-text {
							font-size: 30rpx;
							line-height: 100rpx;
							color: #222222;
							position: relative;
			
							&.active::after {
								position: absolute;
								content: '';
								height: 6rpx;
								width: 70rpx;
								background-color: rgba(255, 141, 26, 1);
								border-radius: 6rpx;
								top: 0;
								left: 0;
								right: 0;
								bottom: -60rpx;
								margin: auto;
								// border-bottom: rgba(255, 141, 26, 1) solid 6rpx;
								// padding-bottom: 10rpx;
							}
						}
					}
				}
			}

			.tui-time-slot {
				width: 100%;
				height: 120rpx;


				.tui-time__list {
					min-width: 100%;
					height: 120rpx;
					display: flex;
					align-items: center;

					.tui-time__item {
						flex-shrink: 0;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						color: #000;
						padding: 0 30rpx 0 0;

						.tui-time {
							font-size: 28rpx;
							line-height: 32rpx;
							padding: 15rpx 20rpx;
							border-radius: 60rpx;
						}

						.tui-status {
							font-size: 24rpx;
							line-height: 24rpx;
							font-weight: 500;
							padding-top: 16rpx;
						}
					}
				}

				.tui-flex__between {
					justify-content: space-between;
				}
			}
		}


		.footer {
			height: 100rpx;
			width: 100%;
			position: fixed;
			bottom: 0;
			z-index: 10;

			.btn_item {
				position: absolute;
				left: 0;
				height: 100%;
				width: 400rpx;
				background-color: #eb4304;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;

				z-index: 11;
			}

			.btn_item_my {
				position: absolute;
				right: 0;
				height: 100%;
				width: 400rpx;
				line-height: 100rpx;
				text-align: center;
				background-color: #ffa917;
				color: #FFFFFF;

				z-index: 11;
			}

			.btn_item.active {
				width: 460rpx;
				transition: width 1s;
				z-index: 12;
				border-top-right-radius: 60rpx;
				border-bottom-right-radius: 60rpx;
			}

			.btn_item_my.active {
				width: 460rpx;
				transition: width 1s;
				z-index: 12;
				border-top-left-radius: 60rpx;
				border-bottom-left-radius: 60rpx;
			}
		}
	}



	.tui-flex__1 {
		flex: 1 !important;
	}

	.tui-width__min {
		min-width: 150rpx;
	}

	.tui-time__active .tui-time {
		color: #fff;
		background: -webkit-linear-gradient(to left, #ffa917, #eb4304);
		/* Safari 5.1-6.0 */
		background: -o-linear-gradient(to left, #ffa917, #eb4304);
		/* Opera 11.1-12.0 */
		background: -moz-linear-gradient(to left, #ffa917, #eb4304);
		/* Firefox 3.6-15 */
		background: linear-gradient(to left, #ffa917, #eb4304);
		/* 标准语法 */
		font-size: 36rpx;
		line-height: 36rpx;
	}

	.tui-time__active .tui-status {
		color: #fff;
		font-size: 28rpx;
		line-height: 28rpx;
		font-weight: bold;
	}
</style>
